<template>
  <div>
    <input type="text" v-model="word"/>
    <p>{{word}}</p>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {word: 'fff',}

    },
    methods: {
      fn() {
        var data = {time: 1234}
        observer(data)
        data.time = 4321

        function observer(data) {
          if (!data || typeof  data !== 'object') {

            return
          }
          Object.keys(data).forEach((key) => {
            defineReactive(data, key, data[key])
          })
        }

        function defineReactive(data, key, val) {
          var dep = new Dep();
          observer(val)
          Object.defineProperty(data, key, {
            enumerable: true, // 可枚举
            configurable: false,
            get: function () {
              Dep.target && dep.addDep(Dep.target);
              return val
            },
            set: function (newVal) {
              if (val === newVal) return;
              val = newVal
              console.log('hahahha', val, newVal)
              dep.notify()
            }
          })
        }

        function Dep() {
          this.subs = [];
        }

        dep.prototype = {
          addSub: function(sub) {
            this.subs.push(sub);
          },
          notify () {
            this.subs.forEach((sub) => {
              sub.update()
            })
          }
        }
      },
    },
    created() {
      this.fn()
    }
  }
</script>

<style scoped>

</style>
